<template>
	<div class="section enterprisesNewsBg" @mousedown="handleMouseDown" @mousemove="handleMouseMove"
		@mouseup="handleMouseUp" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"
		:style=" 'height:' +sectionHeight + 'px;' ">

		<el-row type="flex" class="newsTitleArea" style="align-self: center;">
			<el-col :xs="20" :sm="20" :md="20" :lg="21" :xl="22" class="newsTitle">
				<div class="title_cn">企业实时新闻</div>
				<div class="title_en">realtime news for enterprises</div>
			</el-col>
			<el-col :xs="4" :sm="4" :md="4" :lg="3" :xl="2" class="newsDetile">
				<div class="detileBtn" @click="goToEnterprisesNewsListPage()">{{$t("more")}} <i
						class="el-icon-d-arrow-right"></i></div>
			</el-col>
		</el-row>

		<el-row class="newsContentArea" style="align-self: center;">
			<el-col style="height: max-content;  background-color: rgb(245 245 245);border-radius: 10px;">
				<el-row>
					<el-col :xs="24" :sm="24" :md="14" :lg="14">
						<div class="" style="margin-bottom: 10px;">
							<div class="swiper-container" ref="newsMiniSwiper" id="newsMiniSwiper">
								<div class="swiper-wrapper">
									<div class="swiper-slide" v-for="(slide, index) in newsSlides" :key="index">
										<div class="slide-content">
											<img :src="$request.getImgUrl()+slide.fileUrl" alt="Slide"
												class="swiper-lazy animation" style="height: 24vh;width: 100%;" />
										</div>
										<div class="enterpriseNewstitle">
											{{slide.titles}}
										</div>
										<div class="enterpriseNewsslideOpacityBg"></div>
									</div>
								</div>

								<div class="enterprisesNewsPation">
									<div class="swiperagination" ref="enterprisesNewsSwiperPagination"
										id="enterprisesNewsSwiperPagination"></div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :xs="24" :sm="24" :md="10" :lg="10" class="enterprisesNewsListArea">
						<div class="" style="margin-bottom: 10px;">
							<div>
								<el-row>
									<el-col>
										<el-menu :default-active="'1'" mode="horizontal" @select="handleSelect"
											text-color="#666666" active-text-color="#0082F0" background-color="#e7e7e7"
											style="height:40px;line-height:40px;">
											<template v-for="item in arrA">
												<el-menu-item :index="item.index"
													style="height:40px;line-height:40px;padding: 0px;">{{item.name}}
												</el-menu-item>
											</template>
										</el-menu>
									</el-col>
								</el-row>
								<el-row>
									<ul v-show="activeIndex==1">
										<li v-for="(item, index) in newsList" :key="index"
											@click="goToenterprisesNewsDetail(item.id)">
											<el-row>
												<div v-if="index==0" class="firstEnterprisesNews">
													<div class="chiidTitle">{{item.titles}}</div>
													<div class="chiidContent"
														v-html="$request.formartContent(item.content)">
														<!-- {{item.content?(item.content.replace(/<[^>]+>/g, '').substring(0, 100)+"..."):""}} -->
													</div>
												</div>
												<div v-else class="otherEnterprisesNews">
													{{item.titles}}
													<div class="blackDot"></div>
												</div>
											</el-row>
										</li>
									</ul>
									<ul v-show="activeIndex==2" class="latestAnnouncementNewsList">
										<li v-for="(item, index) in newsList" :key="index"
											@click="goToenterprisesNewsDetail(item.id)">
											<el-row>
												<div v-if="index==0" class="firstEnterprisesNews">
													<div class="chiidTitle">{{item.titles}}</div>
													<div class="chiidContent">
														{{item.content?(item.content.replace(/<[^>]+>/g, '').substring(0, 100)+"..."):""}}
													</div>
												</div>
												<div v-else class="otherEnterprisesNews">
													{{item.titles}}
													<div class="blackDot"></div>
												</div>
											</el-row>
										</li>
									</ul>
									<ul v-show="activeIndex==3" class="videoDisplayNewsList">
										<li class="videoDisplayLi" v-for="(item, index) in newsList" :key="index"
											v-if="index<3" style="border-bottom: 1px dashed #dedede;"
											@click="goToenterprisesNewsDetail(item.id)">
											<div style="height:calc((46vh - 65px)/4); display: flex;">
												<div style="width: 35%;;padding: 5px;">
													<div style="width: 100%;height: 100%;">
														<video :src="item.fileUrl" loop preload="auto" muted controls
															playsinline="true" x5-video-player-type="h5"
															:poster="isMobile ? item.preview : null"
															style="width: 100%;height: 100%;border-radius: 10px;object-fit: fill;"></video>
													</div>
												</div>
												<div style="padding: 0px 10px;width: 65%;">
													<div class="videoDisplayNewsTitle" style="">{{item.titles}}</div>
												</div>

											</div>
										</li>
									</ul>
								</el-row>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		name: 'News',
		props: {
			sectionHeight: Number
		},
		components: {},
		created() {

			this.bindEnterpriseTrends().then(data => {
				this.initBannerSwiper();
			});
			this.bindVideoDisplay();
			this.bindPublicNotice();
		},
		mounted() {
			//	this.initBannerSwiper()
			// this.getMenuList();
			this.isMobile = this.$request.checkIsMobile();

		},
		data() {
			return {
				videoStyle: {
					width: '100%',
					height: '100%',
					borderRadius: '10px',
					objectFit: 'fill',
					'::-webkit-media-controls-start-playback-button': {
						width: '20px',
						height: '20px'
					}
				},
				isMobile: false,
				arrA: [{
					name: this.$t("gttgNews"),
					index: "1"
				}, {
					name: this.$t("latestAnnouncement"),
					index: "2"
				}, {
					name: this.$t("videoDisplay"),
					index: "3"
				}],
				activeIndex: 1,
				newsSlides: [],
				newsList: [],
				enterpriseTrendsList: [],
				publicNoticeList: [],
				videoList: []
			}
		},
		methods: {

			handleSelect(key, keyPath) {
				this.activeIndex = key;
				switch (key) {

					case '1':
						this.newsList = this.enterpriseTrendsList;
						break;
					case '2':
						this.newsList = this.publicNoticeList;
						break;
					case '3':
						this.newsList = this.videoList;
						break;
				}

			},
			/**
			 * 绑定首页-(2)	公示公告
			 */
			bindPublicNotice() {
				let params = {};
				let that = this;
				that.$request.getPublicNotice(params).then(res => {
					that.publicNoticeList = res.data;
				}).catch((error) => {
					console.log(error);

				});
			},
			/**
			 * 绑定首页-(3)	视频展示
			 */
			bindVideoDisplay() {
				let params = {};
				let that = this;
				that.$request.getVideoDisplay(params).then(res => {
					that.videoList = res.data;
				}).catch((error) => {
					console.log(error);

				});
			},
			/**
			 * 绑定首页-2、企业实时新闻
			 */
			bindEnterpriseTrends() {
				let params = {};
				let that = this;
				return new Promise((resolve, reject) => {
					that.$request.getEnterpriseTrends(params).then(res => {
						//resolve(that.formatBannerList(res.data));
						that.newsSlides = res.data.coverList;
						that.enterpriseTrendsList = res.data.enterpriseTrendsList;
						that.newsList = that.enterpriseTrendsList;
						resolve();
					}).catch((error) => {
						console.log(error);
					});
				});
			},
			initBannerSwiper() {

				let that = this;
				that.swiper = new Swiper(that.$refs.newsMiniSwiper, {
					direction: 'horizontal',
					loop: true,
					keyboard: true,
					slidesPerView: 1,
					spaceBetween: 0,
					effect: 'slide',
					lazy: {
						loadPrevNext: true,
					},
					pagination: {
						el: that.$refs.enterprisesNewsSwiperPagination,
						clickable: true,
						renderBullet: function(index, className) {
							return '<span style="width:4px; height:4px;margin:0 2px;background-color:#fff" class="' +
								className + '"> </span>';
						},
					},

					autoplay: {
						delay: 3000,
						stopOnLastSlide: false,
						disableOnInteraction: true,
					},

				});
				that.swiper.on('slideNextTransitionStart', function() {
					var activeIndex = that.swiper.activeIndex;
					//console.log("开始切换" + activeIndex);
				});
			},
			/*-----------------------------处理----鼠标点击后上下滑动--------------------开始----------*/
			handleMouseDown(event) {
				this.startY = event.clientY;
				this.deltaY = 0;
				this.isDragging = true;
			},
			handleMouseMove(event) {
				if (this.isDragging) {
					const currentY = event.clientY;
					this.deltaY = currentY - this.startY;
				}
			},
			handleMouseUp() {

				if (Math.abs(this.deltaY) > 30) {
					if (this.deltaY > 0) {
						this.$emit('scrollUp')
					} else {
						this.$emit('scrollDown')
					}
				}
				this.isDragging = false;
			},
			/*-----------------------------处理----鼠标点击后上下滑动--------------------结束----------*/
			/*-----------------------------处理----手指上下滑动--------------------开始----------*/
			handleTouchStart(event) {
				this.startY = event.touches[0].clientY;
				this.deltaY = 0;
			},
			handleTouchMove(event) {
				const currentY = event.touches[0].clientY;
				this.deltaY = currentY - this.startY;
			},
			handleTouchEnd() {
				if (Math.abs(this.deltaY) > 10) {
					if (this.deltaY > 0) {
						this.$emit('scrollUp')
					} else {
						this.$emit('scrollDown')
					}
				}
			},
			//////跳转列表页
			goToEnterprisesNewsListPage() {
				let strPath = this.$t("enterpriseDynamicsList");
				if (this.activeIndex == 2) {
					strPath = this.$t("publicAnnouncement");
				} else if (this.activeIndex == 3) {
					strPath = this.$t("videoDisplay");
				}
				this.$router.push({
					name: strPath
				});
			},
			//////跳转详情页面
			goToenterprisesNewsDetail(id) {
				let strPath = this.$t("enterpriseDynamicsDetail");
				if (this.activeIndex == 2) {
					strPath = this.$t("publicAnnouncementDetail");
				} else if (this.activeIndex == 3) {
					strPath = this.$t("videoDisplayDetail");
				}
				this.$router.push({
					name: strPath,
					query: {
						id: id,
					}
				});
			},
		},
		beforeDestroy() {

		},
		watch: {

		}
	};
</script>

<style scoped>
	/* 企业实时新闻 */
	.enterprisesNewsBg {
		width: 100%;
		height: 100%;
		background: url("../../assets/img/bg_home_news.jpg") no-repeat;
		background-size: cover;
		background-position: center;
		cursor: pointer;
		padding-top: 0px;
	/* 	border: 1px solid red;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center; */
	}

	.enterprisesNewsBg .newsTitleArea {
		width: 90%;
		height: 50px;
	}

	.enterprisesNewsBg .newsTitle {
		display: flex;
		flex-direction: column;
	}

	.enterprisesNewsBg .title_cn {
		font-size: 18px;
		font-weight: bold;
		border-left: 4px solid #0484D7;
		padding-left: 10px;
		height: 20px;
		line-height: 20px;
	}

	.enterprisesNewsBg .title_en {
		font-size: 12px;
		font-style: italic;
		height: 30px;
		line-height: 30px;
		padding-left: 10px;
	}

	.enterprisesNewsBg .newsDetile {
		justify-content: center;
		text-align: center;
		position: relative;
	}

	.enterprisesNewsBg .detileBtn {
		height: 30px;
		line-height: 30px;
		width: 80px;
		border-radius: 5px;
		background-color: #0484D7;
		color: #FFF;
		text-align: center;
		font-size: 12px;
		/* margin-top: 10px; */
		position: absolute;
		right: 0px;
		top: 10px;
	}

	.enterprisesNewsBg .detileBtn:hover {
		background: #FF7200;
	}

	.newsContentArea {
		width: 90%;
		height: max-content;
	}

	.enterprisesNewsBg .swiper-slide {
		height: 24vh;
	}


	.enterprisesNewsBg .enterprisesNewsPation {
		height: 40px;
		width: 100%;
		opacity: 1;
		position: absolute;
		bottom: 0px;
		right: 0px;
		z-index: 1;
		padding: 0px;
	}

	.enterprisesNewsBg .swiper-container .enterpriseNewstitle {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-weight: 530;
		color: #FFF;
		font-size: 1em;
		width: 100%;
		padding: 0px 60px 0px 10px;
		height: 40px;
		line-height: 40px;
		position: absolute;
		bottom: 0px;
		left: 0px;
		z-index: 9999;
	}

	.enterpriseNewsslideOpacityBg {
		width: 100%;
		height: 40px;
		position: absolute;
		bottom: 0px;
		left: 0px;
		z-index: 99;
		background-color: black;
		opacity: 0.5;
	}


	.enterprisesNewsBg #enterprisesNewsSwiperPagination {
		position: absolute;
		right: 0px;
		bottom: 12px;
		width: 15%;
		z-index: 999999;
	}

	#enterprisesNewsSwiperPagination .swiper-pagination-bullet {
		border-radius: 2.5px;
		width: 30% !important;
		height: 5px;
		background: #FFF !important;
		opacity: 0.6 !important;
	}


	#enterprisesNewsSwiperPagination .swiper-pagination-bullet-active {
		/* background-color: #0484D7; */
	}

	.enterprisesNewsBg .newsListArea {
		padding-left: 20px;
	}

	.enterprisesNewsBg .newsList {
		display: flex;
		flex-direction: column;
	}

	.enterprisesNewsBg .swiper-container {
		margin-left: auto;
		margin-right: auto;
		position: relative;
		overflow: hidden;
		list-style: none;
		padding: 0px;
		z-index: 1;
		height: 24vh;
		position: relative;
	}

	.enterprisesNewsBg .slide-content {
		height: 24vh;

		img {
			height: 24vh;
			width: 100%;
		}
	}

	/* -------------------------------------------------------- */
	.enterprisesNewsListArea {
		height: max-content;
		padding: 0px !important;
	}

	.enterprisesNewsListArea ul {

		padding: 0 5px;
	}

	.enterprisesNewsBg .el-menu-item {
		font-size: 16px !important;
		color: #303133;
		padding: 0 20px;
		width: 33%;
		text-align: center;
		cursor: pointer;
		box-sizing: border-box;
	}

	.enterprisesNewsBg .is-active {
		color: #000 !important;
	}

	.firstEnterprisesNews {
		height: max-content;
		padding: 0px;
		border-bottom: 1px dashed #aeaeae;
		transition: transform 0.2s ease;
	}

	.firstEnterprisesNews:hover {
		transform: scale(0.95);
	}

	.firstEnterprisesNews .chiidTitle {
		font-size: 16px;
		/* height: max-content; */
		height: 30px;
		line-height: 30px;
		align-items: center;
		/* 	display: flex; */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

	}

	.firstEnterprisesNews .chiidContent {
		font-size: 12px;
		height: 50px;
		line-height: 27px;
		/* 		align-items: center;
		display: flex; */
		/* 显示省略号 */
		overflow: hidden;
		text-overflow: ellipsis;
		/* 		white-space: nowrap; */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.otherEnterprisesNews {
		height: 4vh;
		line-height: 4vh;
		width: 100%;
		align-items: center;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		border-bottom: 1px dashed #aeaeae;
		position: relative;
		padding-left: 10px;
		transition: transform 0.2s ease;
		font-size: 14px;
	}

	.otherEnterprisesNews:hover {
		transform: scale(0.95);
	}

	.blackDot {
		width: 4px;
		height: 4px;
		border-radius: 2px;
		background: #000;
		position: absolute;
		left: 0;
		top: calc((4vh - 4px)/2)
	}

	.videoDisplayLi {
		transition: transform 0.2s ease;
	}

	.videoDisplayLi:hover {
		transform: scale(0.95)
	}

	.videoDisplayLi:hover .videoDisplayNewsTitle {
		color: #0484D7;
	}

	.videoDisplayNewsTitle {
		height: 9vh;
		line-height: 9vh;
		align-items: center;
		width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.enterprisesNewsListArea li:hover .chiidTitle,
	.enterprisesNewsListArea li:hover .otherEnterprisesNews {
		color: #0484D7;
	}

	.enterprisesNewsBg .swiper-button-prev {
		left: 10px !important;
	}

	.enterprisesNewsBg .swiper-button-next {
		right: 10px !important;
	}

	video::-webkit-media-controls-start-playback-button {
		width: 10px;
		/* Set the width of the play button */
		height: 10px;
		/* Set the height of the play button */
	}
</style>
